<template>
  <div class="auditDetail">
    <section class="header clearfix">
      <div class="back">
        <i class="iconfont iconfanhui1" @click="goBack()"></i>
        <span @click="goBack()"
          >人员审核{{
            detailObj.personName ? "/" + detailObj.personName : ""
          }}</span
        >
      </div>
    </section>
    <!--基本信息-->
    <div class="p-t-lg">
      <el-descriptions title="基本信息">
        <el-descriptions-item label="姓名">{{
          detailObj.personName
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          detailObj.sex | sexFilter
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证">{{
          detailObj.idCard
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          detailObj.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="户籍性质">{{
          detailObj.censusRegisterType | registerTypeFilter
        }}</el-descriptions-item>
        <el-descriptions-item label="参保身份">{{
          detailObj.insuredStatus
        }}</el-descriptions-item>
        <el-descriptions-item label="联系地址">{{
          detailObj.address
        }}</el-descriptions-item>
        <el-descriptions-item label="户籍地址">{{
          detailObj.permanentAddress
        }}</el-descriptions-item>

        <el-descriptions-item label="学历">{{
          detailObj.education | educationFilter
        }}</el-descriptions-item>
        <el-descriptions-item label="社保缴纳基数">{{
          detailObj.socialSecurityBasic | baseFilter
        }}</el-descriptions-item>
        <el-descriptions-item label="是否缴纳公积金">{{
          detailObj.isPayFund | isPayFundFilter
        }}</el-descriptions-item>
        <el-descriptions-item label="公积金缴纳基数">{{
          detailObj.fundBasic | baseFilter
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!--社保/公积金-->
    <div class="p-t-lg">
      <header>
        <div class="title">缴纳项目</div>
      </header>
      <div class="main clearfix">
        <div class="table">
          <el-table
            show-summary
            :summary-method="getSummaries"
            :data="paymentTableData"
            border
            tooltip-effect="dark"
            v-loading="loading"
            style="width: 100%"
          >
            <el-table-column
              prop="paymentName"
              label="项目名称"
            ></el-table-column>
            <el-table-column
              prop="paymentItemType"
              label="项目类别"
              :formatter="paymentTypeIdFilter"
            ></el-table-column>
            <el-table-column
              prop="paymentType"
              label="缴纳方式"
              :formatter="typeFilter"
            ></el-table-column>
            <el-table-column label="基数">
              <template slot-scope="scope">
                {{
                  scope.row.paymentType == 1
                    ? scope.row.basic
                    : scope.row.defaultVal | baseFilter
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="defaultVal"
              label="默认值"
              :formatter="defaultValFormatter"
            ></el-table-column>
            <el-table-column
              label="公司比例"
              prop="companyVal"
              :formatter="valueFormatter"
            >
            </el-table-column>
            <el-table-column
              label="公司金额"
              prop="companyAmount"
              :formatter="signFormatter"
            >
            </el-table-column>
            <el-table-column
              label="个人比例"
              prop="personVal"
              :formatter="valueFormatter"
            >
            </el-table-column>
            <el-table-column
              label="个人金额"
              prop="personAmount"
              :formatter="signFormatter"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--证件照片/扫描件-->
    <div class="p-t-lg">
      <header>
        <div class="title">证件照片/扫描件</div>
      </header>
      <div class="main">
        <div class="clearfix">
          <div class="img-box">
            <div class="img-bj" @click="showImg(0)">
              <el-image
                v-if="detailObj.idCardFrontPhotoPath"
                style="width: 100%; height: 100%"
                :src="detailObj.idCardFrontPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证正面照片(头像面)</p>
          </div>
          <div class="img-box">
            <div class="img-bj" @click="showImg(1)">
              <el-image
                v-if="detailObj.idCardBackPhotoPath"
                style="width: 100%; height: 100%"
                :src="detailObj.idCardBackPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证反面照片(国徽面)</p>
          </div>
          <div class="img-box">
            <div class="img-bj" @click="showImg(2)">
              <el-image
                v-if="detailObj.residenceBookMainPath"
                style="width: 100%; height: 100%"
                :src="detailObj.residenceBookMainPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本主页</p>
          </div>
          <div class="img-box">
            <div class="img-bj" @click="showImg(3)">
              <el-image
                v-if="detailObj.residenceBookPersonalPath"
                style="width: 100%; height: 100%"
                :src="detailObj.residenceBookPersonalPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本个人页</p>
          </div>
          <div class="img-box">
            <div class="img-head" @click="showImg(4)">
              <el-image
                v-if="detailObj.personPhotoPath"
                style="width: 100%; height: 100%"
                :src="detailObj.personPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>二寸白底免冠照</p>
          </div>
        </div>
      </div>
    </div>
    <!--历史审核不通过原因-->
    <div class="p-t-lg" v-if="detailObj.auditStatus != '1'">
      <el-descriptions title="历史审核"> </el-descriptions>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in remarkList"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.remark }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <!--审核-->
    <div class="p-t-lg" v-if="detailObj.auditStatus == '0' && isShow">
      <header>
        <div class="title">审核操作</div>
      </header>
      <div class="operation">
        <section>
          <span>审核类型</span>
          <span class="value">
            {{ auditType | auditTypeFilter }}
          </span>
        </section>
        <section>
          <span>审核结果</span>
          <span class="value">
            <el-select v-model="auditValue" placeholder="请选择">
              <el-option
                v-for="item in auditOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </section>
      </div>
      <div class="reason-box" v-show="auditValue == 2">
        <p>未通过原因</p>
        <el-input
          type="textarea"
          resize="none"
          placeholder="请输入内容"
          v-model="auditContent"
          maxlength="200"
          show-word-limit
        ></el-input>
      </div>
    </div>
    <div class="btn-box">
      <el-button @click="goBack">取消</el-button>
      <el-button
        type="primary"
        v-if="detailObj.auditStatus == '0' && isShow"
        :loading="submitLoading"
        @click="submit"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
import commonData from "@/assets/js/commonData";
export default {
  name: "auditDetail",
  data() {
    return {
      loading: false,
      submitLoading: false,
      auditType: "",
      detailObj: {},
      remarkList: [], //审核不通过原因
      paymentTableData: [],
      srcList: [],
      imgList: [],
      auditValue: 1,
      auditContent: "",
      isShow: false,
      auditOptions: [
        {
          label: "已通过",
          value: 1,
        },
        {
          label: "未通过",
          value: 2,
        },
      ],
      itemClassification: [],
    };
  },
  methods: {
    //处理合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }

        if (
          column.property == "companyAmount" ||
          column.property == "personAmount"
        ) {
          const values = data.map((item) => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return base.accAdd(prev, curr);
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        }
      });

      return sums;
    },
    //展示指定图片
    showImg(i) {
      this.srcList = [];
      this.srcList.push(this.imgList[i]);
    },
    typeFilter(a, b, c) {
      if (c == 1) {
        return "比例";
      } else {
        return "值";
      }
    },
    defaultValFormatter(a, b, c) {
      if (c >= 0) {
        return c;
      } else {
        return "-";
      }
    },
    valueFormatter(a, b, c) {
      if (c > 0) {
        return c + "%";
      } else {
        return "-";
      }
    },
    paymentTypeIdFilter(a, b, c) {
      if (c == "0" || c) {
        return this.itemClassification[c].label;
      }
    },
    submit() {
      var reqData = {
        auditId: this.$route.query.auditId,
        auditStatus: this.auditValue,
        auditContent: this.auditContent,
      };
      this.submitLoading = true;
      let reqReport = reqRep({ traCode: "_PROCESS_AUDIT", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
          this.submitLoading = false;
        } else {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.goBack();
          this.submitLoading = false;
        }
      });
    },
    getData() {
      var reqData = {
        auditId: this.$route.query.auditId,
      };
      let reqReport = reqRep({ traCode: "_GET_AUDITV2_3", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {


          this.detailObj = resReport.data;
          if (this.detailObj.auditStatus != "1") {
            this.remarkList =
              this.detailObj.auditContent &&
              JSON.parse(this.detailObj.auditContent);
          } else {
            this.remarkList = [];
          }

          // this.paymentTableData = resReport.data.baseInfo || [];
          // this.imgList = [
          //   resReport.data.idCardFrontPhotoPath,
          //   resReport.data.idCardBackPhotoPath,
          //   resReport.data.residenceBookMainPath,
          //   resReport.data.residenceBookPersonalPath,
          //   resReport.data.personPhotoPath,
          // ];
          this.getPaymentAmount();
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    //获取缴纳项目比例的金额
    getPaymentAmount() {
      if (this.paymentTableData.length > 0) {
        //paymentType==1 比例
        //paymentItemType==1 社保 paymentItemType==2 公积金
        //userDetail.socialSecurityBasic 社保基数 userDetail.fundBasic 公积金基数
        for (let index = 0; index < this.paymentTableData.length; index++) {
          if (this.paymentTableData[index].paymentType == 1) {
            //基数
            let baseVal = this.paymentTableData[index].basic || 0;

            let companyVal =
              base.accDiv(this.paymentTableData[index].companyVal, 100) || 0;
            let personVal =
              base.accDiv(this.paymentTableData[index].personVal, 100) || 0;

            let companyAmount = base.accMul(baseVal, companyVal) || 0;
            let personAmount = base.accMul(baseVal, personVal) || 0;

            if (this.paymentTableData[index].paymentItemType == 2) {
              //公积金四舍五入取整
              companyAmount = Number(companyAmount.toFixed(0));
              personAmount = Number(personAmount.toFixed(0));
            } else {
              //四舍五入保留2位小数
              companyAmount = Number(companyAmount.toFixed(2));
              personAmount = Number(personAmount.toFixed(2));
            }

            this.$set(
              this.paymentTableData[index],
              "companyAmount",
              companyAmount
            );
            this.$set(
              this.paymentTableData[index],
              "personAmount",
              personAmount
            );
          } else {
            this.$set(this.paymentTableData[index], "companyAmount", 0);
            this.$set(this.paymentTableData[index], "personAmount", 0);
          }
        }
      }
    },
    valueFormatter(a, b, c) {
      if (c > 0) {
        return c + "%";
      } else {
        return "0";
      }
    },
    signFormatter(a, b, c) {
      return c + "元";
    },
  },
  filters: {
    valueFormatter(c) {
      if (c > 0) {
        return c + "%";
      } else {
        return "0";
      }
    },
    paymentTypeFilter(e) {
      if (e == 0) {
        return "值";
      } else {
        return "比例";
      }
    },
    //审核结果 0未审核；1审核通过；2审核不通过
    statusFilter(c) {
      if (c == "0") {
        return "未审核";
      } else if (c == "1") {
        return "已通过";
      } else if (c == "2") {
        return "审核不通过";
      }
    },
    //审核类型0入职审核；1离职审核；2停缴公积金审核
    auditTypeFilter(c) {
      if (c == 0) {
        return "入职审核";
      } else if (c == 1) {
        return "离职审核";
      } else if (c == 2) {
        return "停缴公积金审核";
      } else if (c == 3) {
        return "减少缴纳项目";
      } else if (c == 4) {
        return "增加缴纳项目";
      } else if (c == 5) {
        return "修改缴纳项目";
      }
    },
  },
  created() {
    this.itemClassification = commonData.itemClassification;
    if (
      sessionStorage.getItem("KEY") == "A" ||
      sessionStorage.getItem("KEY") == "C"
    ) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    this.auditType = this.$route.query.auditType || "未知";
    this.getData();
  },
};
</script>
<style scoped>
.warn {
  padding: 15px 44px 30px;
}
.warn i {
  float: left;
  color: #f56c6c;
  font-weight: bold;
}
.warn .warn-content {
  float: left;
  margin-left: 4px;
}
.warn-content .auditStatus {
  color: #f56c6c;
  font-weight: bold;
}
.warn-content .auditContent {
  color: #666;
  margin-top: 10px;
}
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
}
.header i {
  margin-right: 5px;
}
.back {
  display: inline-block;
  cursor: pointer;
}
.add {
  float: right;
  color: #666;
  cursor: pointer;
}
.add:hover {
  color: #13cb6e;
}
.el-input,
.el-select {
  width: 228px;
}
.leave {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.leave .message {
  display: inline-block;
  line-height: 34px;
}
.leave-pointer {
  float: right;
}
.leave-pointer span {
  color: #666;
  margin-left: 20px;
  cursor: pointer;
}
.leave-pointer .reset:hover {
  color: #13cb6e;
}
.leave-pointer i {
  font-weight: bold;
  padding-right: 5px;
}
.leave-pointer .btn {
  height: 34px;
  line-height: 14px;
  padding: 8px;
  color: #fff;
  background-color: #13cb6e;
}
.el-form-item {
  width: 390px;
  margin: 0 auto 22px;
}
.change {
  display: inline-block;
  cursor: pointer;
  padding: 20px 20px 0;
}
.change i {
  color: #13cb6e;
  font-weight: bold;
  vertical-align: top;
}
.change:hover {
  color: #13cb6e;
}
.staff-detail-general {
  margin: 30px 0 50px;
}
.p-l-xxl {
  padding-left: 44px;
}
.p-l-xxl .name {
  font-size: 24px;
  font-weight: 700;
}
.p-l-xxl .p-l {
  color: #666;
  font-size: 14px;
  padding-left: 15px;
}
.mt {
  color: #999;
  padding: 20px 0 0 44px;
}
.mt ul {
  float: left;
  width: 50%;
}
.mt ul li {
  margin-bottom: 5px;
}
.mt i {
  color: #fff;
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-style: normal;
  border-radius: 3px;
  cursor: pointer;
  background-color: #13cb6e;
}
.p-t-lg {
  clear: both;
  padding: 30px 44px;
  border-top: 1px solid #eee;
}
header .title {
  display: inline-block;
  font-size: 18px;
}
header .edit {
  float: right;
  color: #666;
  cursor: pointer;
}
.edit:hover {
  color: #13cb6e;
}
.edit i {
  vertical-align: bottom;
}
.main,
.operation {
  margin-top: 30px;
}
.main > section {
  float: left;
  padding-bottom: 15px;
  width: 33%;
}
.operation section {
  margin-bottom: 20px;
}
.main span,
.operation span {
  font-size: 14px;
  color: #999;
}
.main > section span:first-child {
  display: inline-block;
  width: 100px;
}
.main span i,
.reason-box p i {
  color: #f56c6c;
}
.main .value,
.operation .value {
  padding-left: 5px;
  color: #333;
  font-weight: bold;
}
.family {
  padding: 10px 20px;
  background-color: #eee;
  border-radius: 3px;
}
.family .info {
  display: inline-block;
}
.info .f-name,
.word-address {
  color: #666 !important;
}
.info li {
  margin-bottom: 5px;
}
.info span {
  display: inline-block;
  margin-right: 20px;
}
.family .operation {
  float: right;
  text-align: right;
}
.operation > span {
  margin-left: 20px;
  display: inline-block;
  cursor: pointer;
}
.operation > span:hover {
  color: #13cb6e;
}
.img-box {
  float: left;
  margin: 0 10px 10px 0;
}
.img-bj {
  position: relative;
  width: 225px;
  height: 135px;
  margin: 0 10px 10px 0;
  cursor: pointer;
  border-radius: 4px;
  background-color: #eee;
}
.img-bj img,
.img-head img {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}
.tip > div {
  color: #999;
  display: inline-block;
  width: 225px;
  margin: 0 10px 10px 0;
}
.img-head {
  position: relative;
  text-align: center;
  width: 108px;
  height: 135px;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
.img-head i,
.img-bj i {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  font-size: 20px;
  margin-top: -10px;
  margin-left: -10px;
}
.img-box p {
  color: #999;
  font-size: 12px;
}
.explain {
  color: #999;
  margin-top: 10px;
}
.reason-box p {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}
.btn-box {
  padding: 30px 44px;
  border-top: 1px solid #eee;
}
</style>
